<template>
  <view>
    <uni-section title="基础信息" type="line">
      <uni-list>
        <!-- <uni-list-item title="设备类别" :rightText="detail.equipmentType" /> -->
        <!-- <uni-list-item title="设备类别" rightText="1" /> -->
        <!-- <uni-list-item title="设备品牌" :rightText="detail.equipmentBrand" /> -->
        <!-- <uni-list-item title="设备型号" :rightText="detail.equipmentModel" /> -->
        <uni-list-item title="物资分类" :rightText="detail.goodsType" />
        <uni-list-item title="物资名称" :rightText="detail.goodsName" />
        <uni-list-item title="规格型号" :rightText="detail.goodsModel" />
        <uni-list-item title="设备序列号" :rightText="detail.equipmentSeq" />
        <uni-list-item title="设备购置时间" :rightText="detail.buyDate" />
        <uni-list-item title="设备原值" :rightText="detail.originalValue" />
        <uni-list-item title="设备来源" :rightText="detail.equipmentSrc" />
        <uni-list-item title="设备状态" :rightText="detail.equipmentStatus" />
        <uni-list-item title="设备率定时间" :rightText="detail.ratedDate" />
        <uni-list-item title="使用部门" :rightText="detail.usedDept" />
        <uni-list-item title="使用班组" :rightText="detail.usedTeam" />
        <uni-list-item title="使用人" :rightText="detail.userName" />
        <uni-list-item title="存放位置" :rightText="detail.position" />
        <uni-list-item title="固定资产编号" :rightText="detail.assetNumber" />
        <!-- <uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" /> -->
      </uni-list>
    </uni-section>

    <uni-section title="更新记录" type="line" v-if="historyList.length">
      <uni-collapse-item titleBorder="none" v-for="(item, index) in historyList" :key="index">
        <template v-slot:title>
          <uni-list>
            <uni-list-item :title="item.inserttime" :show-extra-icon="false" :extra-icon="extraIcon"> </uni-list-item>
          </uni-list>
        </template>
        <view class="content">
          <uni-list-item title="使用班组" :rightText="item.usedTeam" />
          <uni-list-item title="存放位置" :rightText="item.position" />
        </view>
      </uni-collapse-item>
    </uni-section>

    <uni-section title="维修记录" type="line" v-if="repairList.length">
      <uni-collapse-item titleBorder="none" v-for="(item, index) in repairList" :key="index">
        <template v-slot:title>
          <uni-list>
            <uni-list-item :title="item.createTime" :show-extra-icon="false" :extra-icon="extraIcon"> </uni-list-item>
          </uni-list>
        </template>
        <view class="content">
          <uni-list-item title="维修信息:" />
          <template slot="footer">
            <view class="inner">
              {{ item.repairRecord }}
            </view>
          </template>
          <!-- <uni-easyinput disabled type="textarea" autoHeight v-model="item.repairRecord" placeholder=""/> -->
        </view>
      </uni-collapse-item>
    </uni-section>
    <view class="footer" v-if="showAdmin">
      <button class="btn" @click="inputDialogToggle">更新</button>
      <button class="btn" @click="getHistoryHan">查看历史</button>
      <button class="btn" @click="repairDialogToggle">维修</button>
      <button class="btn" @click="getRepairList">维修记录</button>
    </view>

    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog
        ref="inputClose"
        title="更新信息"
        @confirm="dialogInputConfirm"
        :before-close="true"
        @close="close"
      >
        <view>
          <view class="">
            <uni-forms ref="valiForm" :rules="rules" :modelValue="typeFormData">
              <uni-forms-item label="班组" name="usedTeam" required>
                <uni-easyinput type="text" v-model="typeFormData.usedTeam" placeholder="请输入使用班组" />
              </uni-forms-item>
              <uni-forms-item label="位置" name="position" required>
                <uni-easyinput type="text" v-model="typeFormData.position" placeholder="请输入设备存放位置" />
              </uni-forms-item>
			  <uni-forms-item label="使用人" name="position" required>
			    <uni-easyinput type="text" v-model="typeFormData.userName" placeholder="请输入使用人" />
			  </uni-forms-item>
            </uni-forms>
          </view>
        </view>
      </uni-popup-dialog>
    </uni-popup>

    <uni-popup ref="repairDialog" type="dialog">
      <uni-popup-dialog
        ref="repairInputClose"
        title="更新信息"
        @confirm="repairDialogConfirm"
        :before-close="true"
        @close="repairClose"
      >
        <view>
          <view class="">
            <uni-forms ref="repairValiForm" :rules="repairRules" :modelValue="repairFormData">
              <uni-forms-item label="维修" name="repairRecord" required>
                <uni-easyinput type="text" v-model="repairFormData.repairRecord" placeholder="请输入维修信息" />
              </uni-forms-item>
            </uni-forms>
          </view>
        </view>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import storage from "../../../utils/storage";
import { updateInfo, getHistory, getLists, updateRepair, getRepairList } from "@/api/me";
export default {
  data() {
    return {
      showAdmin: false,
      detail: {},
      historyList: [],
      repairList: [],
      typeFormData: {
        usedTeam: "",
        position: "",
      },
      // 校验规则
      rules: {
        usedTeam: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
        position: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
      },

      repairFormData: {
        repairRecord: "",
      },
      // 校验规则
      repairRules: {
        repairRecord: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
      },
    };
  },
  onLoad: function (option) {
    const eventChannel = this.getOpenerEventChannel();
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on("acceptDataFromOpenerPage", (data) => {
      this.detail = data;
      console.log(this.detail);
    });

    let vuex_roles = storage.get("vuex_roles");
    if (vuex_roles.includes("admin") || vuex_roles.includes("system")) this.showAdmin = true;
  },
  methods: {
    inputDialogToggle() {
      this.$refs.inputDialog.open();
    },
    dialogInputConfirm() {
      console.log(this.typeFormData);
      this.$refs["valiForm"]
        .validate()
        .then((res) => {
          console.log("success", res);
          updateInfo({ id: this.detail.id, ...this.typeFormData }).then((res) => {
            console.log(res);
            uni.showToast({
              title: `更新成功！`,
            });
            this.typeFormData = {
              usedTeam: "",
              position: "",
            };
            this.close();
            // this.getHistoryHan()
            this.getListDate();
          });
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    repairDialogToggle() {
      this.$refs.repairDialog.open();
    },
    repairDialogConfirm() {
      console.log(this.repairFormData);
      this.$refs["repairValiForm"]
        .validate()
        .then((res) => {
          console.log("success", res);
          updateRepair({ srcid: this.detail.id, ...this.repairFormData }).then((res) => {
            console.log(res);
            uni.showToast({
              title: `更新成功！`,
            });
            this.repairFormData = {
              repairRecord: "",
            };
            this.repairClose();
            // this.getHistoryHan()
            this.getListDate();
          });
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    repairClose() {
      // TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
      // ...
      this.$refs.repairDialog.close();
    },
    getHistoryHan() {
      getHistory({ id: this.detail.id, pageNum: 1, pageSize: 99 })
        .then((res) => {
          if (!res?.rows?.length) {
            return uni.showToast({
              title: `暂无历史更新记录！`,
              icon: "none",
            });
          }
          this.historyList = res.rows;
          console.log(res);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    getRepairList() {
      getRepairList({ id: this.detail.id, pageNum: 1, pageSize: 99 })
        .then((res) => {
          if (!res?.rows?.length) {
            return uni.showToast({
              title: `暂无维修记录！`,
              icon: "none",
            });
          }
          this.repairList = res.rows;
          console.log(res);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    close() {
      // TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
      // ...
      this.$refs.inputDialog.close();
    },
    getListDate(e) {
      // let res = await getList()
      getLists({
        pageSize: 99,
        current: 1,
        searchValue: this.detail.assetNumber,
      }).then((res) => {
        console.log(res);
        this.detail = res.rows[0];
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #fff;
}
.footer {
  display: flex;
  flex-direction: row;
  padding: 20rpx;
}

.footer .btn:not(:last-child) {
  margin-right: 20rpx;
}
.btn {
  font-size: 26rpx;
  flex: 1;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  font-weight: bold;
  width: 100%;
  border-radius: 16rpx;
  color: #2879ff;
  background: rgba(40, 121, 255, 0.2);
}
.inner {
  padding: 0 20rpx 20rpx;
}
</style>
